<template>
	<view class="container">
		<view class="body">
			<!-- 头像 -->
			<view class="name">
				<view class="list-person">
					<view style="line-height: 120rpx;">{{$t('mydetails.Avatar')}}</view>
					<view class="list-item">
						<image class="img" src="../../static/img/teache01.png"></image>
					</view>
				</view>
				<view class="list-person">
					<view>{{$t('mydetails.Student_number')}}</view>
					<view class="list-item">{{this.userInformation.studentNumber}}</view>
				</view>
				<view class="list-person">
					<view>{{$t('mydetails.Class')}}</view>
					<view class="list-item">{{this.userInformation.classId}}</view>
				</view>
				<view class="list-person">
					<view>{{$t('mydetails.Name')}}</view>
					<view class="list-item">{{this.userInformation.username}}</view>
				</view>
				<view class="list-person-t">
					<view>{{$t('mydetails.Gender')}}</view>
					<view class="list-item">{{this.userInformation.sex}}</view>
				</view>
			</view>
		</view>
		
		
		<view class="room">
			<view class="r-item">
				<view class="list-person-t">
					<view>{{$t('mydetails.Address')}}</view>
					<view class="list-item">{{this.userInformation.address}}</view>
				</view>
			</view>
		</view>

		
		<view class="p-item">
			<view class="p-list-item">
				<view class="list-person">
					<view>{{$t('mydetails.Ethnic_group')}}</view>
					<view class="list-item">{{this.userInformation.national}}</view>
				</view>
				<view class="list-person">
					<view>{{$t('mydetails.Telephone_number')}}</view>
					<view class="list-item">{{this.userInformation.tel}}</view>
				</view>
				<view class="list-person-t">
					<view>{{$t('mydetails.Birthday')}}</view>
					<view class="list-item">{{this.userInformation.birth}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInformation: [{
					username: '',
					sex: '',
					birth: '',
					tel: '',
					classId: '',
					studentNumber: '',
					address: '',
					national: ''
				}]
			}
		},
		methods: {
			determineGender(sex) {
				if (sex == 1) {
					this.userInformation.sex = '男'
				} else {
					this.userInformation.sex = '女'
				}
			}
		},
		onShow() {
			// 从浏览器缓存中拿数据
			this.userInformation.username = uni.getStorageSync("username");
			this.userInformation.sex = uni.getStorageSync("sex");
			this.userInformation.birth = uni.getStorageSync("birth");
			this.userInformation.tel = uni.getStorageSync("tel");
			this.userInformation.classId = uni.getStorageSync("classId");
			this.userInformation.studentNumber = uni.getStorageSync("studentNumber");
			this.userInformation.address = uni.getStorageSync("address");
			this.userInformation.national = uni.getStorageSync("national");
			//判断性别的方法
			this.determineGender(this.userInformation.sex);
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		background-color: #F5F5F5;
		position: relative;
		padding-top: 20rpx;
	}
	page{
	  height:100%
	}
	.body {
		 background-color: #fff;
		 margin: 0 20rpx;
		 border-radius: 10rpx;
		 
		 .name {
			 padding: 0 15rpx;
			 
			 .img {
				 width: 120rpx;
				 height: 120rpx;
			 }
		 }
	}
	
	.room {
		margin: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		
		.r-item {
			padding: 0 15rpx;
		}
	}
	.p-item {
		background-color: #fff;
		margin: 20rpx 20rpx;
		border-radius: 10rpx;
		
		.p-list-item {
			padding: 0 15rpx;
		}
	}
	.list-person {
		display: flex;
		border-bottom: 1rpx solid #DCDCDC;
		padding: 15rpx 10rpx;
		text-align:justify;
		letter-spacing:1px;  
	}
	.list-person-t {
		display: flex;
		padding: 15rpx 10rpx;
		text-align:justify;
		letter-spacing:1px;  
	}
	.list-item {
		color: #696969;
		margin-left:auto;
	}
	
</style>
